<template>
  <div class="login-container">
    <el-form @submit.native.prevent="handleLogin">
      <el-form-item label="用户名">
        <el-input v-model="username" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="password" type="password" />
      </el-form-item>
      <el-button type="primary" native-type="submit">登录</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      username: 'admin',
      password: '123456'
    }
  },
  methods: {
    handleLogin() {
      // 模拟登录
      if (this.username === 'admin' && this.password === '123456') {
        this.$store
          .dispatch('userStore/login', {
            token: 'mock-token',
            permission: ['admin', 'editor'] // 从后端获取权限
          })
          .then(() => {
            this.$router.push('/')
          })
      }
    }
  }
}
</script>
